Let me look at your files first.Now let me look at more of the CSS, specifically the hero and container sections:Good, I have a thorough picture now. Let me check the container and a few more key areas:I now have a solid read on both files. Here's my full breakdown of issues and the changes I'd make:
________________


Issues Found & Recommended Fixes
🔴 Critical: Viewport is locked in index.html
<meta name="viewport" content="width=device-width, initial-scale=0.533, minimum-scale=0.533, maximum-scale=0.533, user-scalable=no">


This forces the page to render zoomed out and blocks all user zoom. It's why the page likely looks tiny on mobile — the browser can't compensate. This should be:
<meta name="viewport" content="width=device-width, initial-scale=1.0">


papers.html already does this correctly.
________________


🟠 papers.html — sidebar collapses on mobile
The .papers-grid uses grid-template-columns: minmax(220px, 310px) minmax(0, 1fr) with no mobile breakpoint. On small screens the sidebar squishes everything. Add a stacked layout below ~640px where the sidebar becomes a horizontal scrolling pill row on top, and the preview pane takes full width below it.
________________


🟡 style.css — empty @media (max-width: 1024px) block
Lines 3748–3749 are a completely empty breakpoint. Either fill it or remove it to keep the CSS clean.
________________


🟡 Nav icon buttons are oversized on mobile
.icon-tile is 62×62px and the @media (max-width: 768px) override sets it to 44×44px — but the SVGs inside stay at width="28" / width="30" and don't scale down, so the icon can feel cramped or misaligned inside a 44px circle.
________________


🟡 .papers-preview viewer height is brittle
height: calc(100vh - 310px);


The 310px magic number works on desktop but on mobile (where the nav/topbar are different heights) this can clip or overflow. Better to use min-height + flex: 1 within a column layout.
________________


🟢 Minor: .hero-btn has min-width: 172px hardcoded
This is fine on desktop but on narrow screens (360–400px) three buttons with min-width: 172px and flex-wrap: wrap can create awkward single-column stacking with excessive widths. The ≤560px fix already sets min-width: 100% which is good, but the gap between 560–768px could still produce uneven wrapping.
________________


🟢 Minor: papers.html missing the body top-padding for the dev toolbar
index.html has body { padding-top: 50px } to account for the fixed dev toolbar. papers.html shares style.css but doesn't have the dev toolbar, so it inherits that 50px top gap unnecessarily. You can override it with body { padding-top: 0 } on papers.html.
________________


Want me to go ahead and apply all of these directly to the files and give you the updated versions to download?